<script setup>
import router from '@/router';
import { usePostListStore } from '@/stores/post';
import { useUserListStore, useUserStore } from '@/stores/user';
import { defineProps, ref } from 'vue';
import { likeFn, doCollectFn } from '@/api/post';
import { showToast } from 'vant';
import { addConcernFn } from '@/api/user';

const userList = useUserListStore()
const post = usePostListStore()
const props = defineProps(['topic', 'postList', 'flag'])
const postList = ref(post.postList)
const flag = ref(false)
const user = useUserStore()
if (props.topic) {
    postList.value = post.getTopicPost(props.topic)
}
if (props.postList) {
    postList.value = props.postList
}
if (props.flag) {
    flag.value = props.flag
}

function toPostShow(postid) {
    router.push({
        name: 'postShow',
        query: {
            postid
        }
    })
}

function like(postid, postUserid) {
    likeFn({
        postid,
        postUserid,
        userid: user.userInfo.userid
    }).then(res => {
        showToast(res.message)
    })
}

function doCollect(postid, postUserid) {
    doCollectFn({
        postid,
        postUserid,
        userid: user.userInfo.userid
    }).then(res => {
        // console.log(res);
        showToast(res.message)
    })
}

function toConcern(postUserid) {
    addConcernFn({
        userid: user.userInfo.userid,
        concernUserid: postUserid,
    }).then(res => {
        showToast(res.message)
    })
}

</script>

<template>
    <section v-for="item in postList">
        <div class="top">
            <img :src="userList.getUserInfo(item.userid).img" alt="">
            <div>
                <h3>{{ userList.getUserInfo(item.userid).username }}</h3>
                <p>{{ item.time }}</p>
            </div>
            <span v-if="flag">删除</span>
            <span v-else @click="toConcern(item.userid)">{{ (user.userInfo.concern.indexOf(item.userid) != -1) ? '已关注' :
                '+关注'
                }}</span>
        </div>
        <div class="center" @click="toPostShow(item.postid)">
            <h2>{{ item.postText }}</h2>
            <img :src="item.img" alt="">
            <p><span v-for="topic in item.topics"># {{ topic }}</span></p>
        </div>
        <div class="buttom">
            <div class="left">{{ parseInt(Math.random() * 100) }} 浏览</div>
            <div class="right">
                <span @click="like(item.postid, item.userid)">
                    <van-icon v-if="post.getPost(item.postid).likes.indexOf(user.userInfo.userid) != -1" name="good-job"
                        color="red"></van-icon>
                    <van-icon v-else name="good-job-o"></van-icon>
                    {{ item.likes.length }}
                </span>
                <span @click="doCollect(item.postid, item.userid)">
                    <van-icon v-if="post.getPost(item.postid).collects.indexOf(user.userInfo.userid) != -1" name="star"
                        color="#ffa600"></van-icon>
                    <van-icon v-else name="star-o"></van-icon>
                    {{ item.collects.length }}
                </span>
                <span>
                    <van-icon name="comment-o"></van-icon>
                    {{ item.comments.length }}
                </span>
            </div>
        </div>
    </section>
</template>

<style lang="scss" scoped>
section {
    background-color: rgb(240, 240, 240);
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border-radius: 10px;

    .top {
        display: flex;
        position: relative;

        img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        h3 {
            padding: 0;
            margin: 0;
        }

        span {
            position: absolute;
            right: 10px;
            display: inline-block;
            font-size: 16px;
            color: red;
            border: 1px solid red;
            padding: 4px;
            border-radius: 5px;
            top: 2px;
            width: 80px;
            text-align: center;
        }
    }

    .center {
        img {
            width: 100px;
            height: 100px;
        }

        span {
            padding: 0 5px;
        }
    }

    .buttom {
        display: flex;
        justify-content: space-between;

        span {
            margin: 0 5px;
        }
    }
}
</style>